import React from 'react';
import { Child2 } from './Child2-父到子-子到父';

import './Parent2.css';

class Parent2 extends React.Component {
  // 组件状态（数据）
  state = {
    list: [
      {
        id: 1,
        name: '超级好吃的棒棒糖',
        price: 18.8,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 2,
        name: '超级好吃的大鸡腿',
        price: 34.2,
        info: '开业大酬宾，全场8折',
      },
      {
        id: 3,
        name: '超级无敌的冰激凌',
        price: 14.2,
        info: '开业大酬宾，全场8折',
      },
    ],
  };

  // 父组件定义一个函数
  kan = (id, count) => {
    console.log(id, count);
    // 砍价
    const newList = this.state.list.map((item) => {
      if (id === item.id) {
        // 进度丢失近似处理方式：转化成 float，取两位有效即可
        return { ...item, price: parseFloat(item.price - count).toFixed(2) };
      } else {
        return item;
      }
    });

    // 刷新页面
    this.setState({
      list: newList,
    });
  };

  render() {
    return (
      // 父组件
      <div className="parent">
        <h1>父组件</h1>
        {/* 把下面UI抽离为子组件 */}
        {this.state.list.map((item) => (
          // ...item 会把这个对象中所有的属性展开传递到子组件
          // 使用的时候要确认，是不是所有的属性都要传递过去。
          <Child2 key={item.id} {...item} kan={this.kan} />
        ))}
      </div>
    );
  }
}
export default Parent2;
